<template>
	<scroll-view scroll-y :style="{height:windowH+'px'}" class="wrapper">
		<view @click="offInfo" v-if="lookinfo" class="pos">
			<view class="alert">
				<view @click.stop="bindHeadlook" hover-class="bindhover">预览头像</view>
				<view @click.stop="bindHead" hover-class="bindhover">更换头像</view>
				<view @click.stop="lookMy(myinfo.user_arr.uid)" hover-class="bindhover">查看主页</view>
			</view>
		</view>
		<view v-if="myinfo!=''" class="topCont">
			<view @tap="bindSetup" class="setup flex_row">
				<image src="../../static/image/setup.png" mode="aspectFill"></image>
				<text>设置</text>
			</view>
			<view class="user flex_row">
				<image @click="selectInfo" class="btnActive" :src="myinfo.user_arr.avatarurl" mode="aspectFill"></image>
				<view class="text flex_col">
					<view @tap="bindVip" class="name flex_row">
						<text>{{myinfo.user_arr.nickname}}</text>
						<view v-if="myinfo.user_arr.is_vip==1" class="vipon">黄金会员</view>
						<view v-else class="btnActive">开通会员</view>
					</view>
					<view class="sign">{{myinfo.user_arr.profile}}</view>
				</view>
			</view>
			<view class="menuCont flex_row">
				<view @click="bindHua" class="flex_col">
					<image src="../../static/image/my1.png" mode="aspectFill"></image>
					<text>花朵总数</text>
					<text>{{myinfo.user_arr.flower_num}}</text>
				</view>
				<view @click="bindFen" class="flex_col">
					<image src="../../static/image/my2.png" mode="aspectFill"></image>
					<text>我的颜值分</text>
					<text v-if="myinfo.user_arr.face_fee>1">{{myinfo.user_arr.face_fee}}</text>
					<text v-else>暂无</text>
				</view>
				<view @click="bindMoney" class="flex_col">
					<image src="../../static/image/my3.png" mode="aspectFill"></image>
					<text>钱包余额</text>
					<text>{{myinfo.user_arr.balance_money}}</text>
				</view>
			</view>
			<view class="navCont">
				<view @click="bindNav(item.page)" hover-class="bindhover" class="navList flex_row" v-for="(item,index) in navList" :key="index">
					<view class="names flex_row">
						<image :src="item.img" mode="aspectFill"></image>
						<text>{{item.txt}}</text>
					</view>
					<view class="right flex_row">
						<view v-if="item.pot && item.potType!=0" class="pot"></view>
						<view v-if="item.potNum && item.potType!=0" class="pot potNum flex_col">
							<text v-if="item.potType>99">99+</text>
							<text v-else>{{item.potType}}</text>
						</view>
						<view v-if="item.people" class="people flex_row">
							<block v-for="(imgs,ins) in item.peopleList" :key="ins">
								<image :src="imgs.avatarurl" mode="aspectFill"></image>
							</block>
						</view>
						<image class="right_icon" src="../../static/image/right_icon.png" mode="aspectFit"></image>
					</view>
				</view>
				<button open-type="contact" hover-class="bindhover" class="contact flex_row">
					<view class="names flex_row">
						<image src="../../static/image/my12.png" mode="aspectFill"></image>
						<text>联系客服</text>
					</view>
					<view class="right flex_row">
						<image class="right_icon" src="../../static/image/right_icon.png" mode="aspectFit"></image>
					</view>
				</button>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import common from "../common/network.js";
	export default {
		name:"mycenter",
		components:{},
		props:{
			myinfo:{
				defalut:{},
				type:Object
			},
			navList:{
				defalut:[],
				type:Array
			},
			lookinfo:{
				defalut: false,
				type:Boolean
			}
		},
		data(){
			return{
				windowH:0,
			}
		},
		onLoad:function(){
			var that = this;
			common.network.getHeight(function(h,w){
				that.windowH = h - w/750
			})
		},
		methods:{
			selectInfo:function(){
				this.$emit('selectInfo')
			},
			bindHead:function(){
				this.$emit('bindHead')
			},
			bindHeadlook:function(){
				this.$emit('bindHeadlook')
			},
			lookMy:function(id){
				this.$emit('lookMy',id)
			},
			offInfo:function(){
				this.$emit('offInfo')
			},
			bindSetup:function(){
				this.$emit('bindSetup')
			},
			bindVip:function(){
				this.$emit('bindVip')
			},
			bindHua:function(){
				this.$emit('bindHua')
			},
			bindFen:function(){
				this.$emit('bindFen');
			},
			bindMoney:function(){
				this.$emit('bindMoney')
			},
			bindNav:function(_page){
				this.$emit('bindNav',_page)
			}
		},
	}
</script>
<style scoped>
	.wrapper{
		padding-bottom: 110px;
	}
	.pos{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background: rgba(0,0,0,0.7);
	}
	.alert{
		background: #fff;
		width: 60%;
		position: absolute;
		top: 30%;
		left: 20%;
		text-align: center;
		border-radius: 14px;
		overflow: hidden;
	}
	.alert view{
		padding: 18px 0;
		border-bottom: 1px solid #E1E1E1;
	}
	.alert view:last-of-type{
		border-bottom: none;
	}
	.topCont{
		height: 450px;
		background: linear-gradient(to right,#AD32F4,#6673FF);
		color: #fff;
	}
	.setup{
		width: 200px;
		padding-top: calc(var(--status-bar-height) + 20px);
		padding-left: 30px;
		opacity: 0.9;
	}
	.setup:active{
		opacity: 0.6;
	}
	.setup image{
		width: 36px;
		height: 36px;
		margin-right: 10px;
	}
	.user{
		padding: 0 30px;
		padding-top: 70px;
	}
	.user image{
		width: 150px;
		min-width: 150px;
		height: 150px;
		border-radius: 50%;
		margin-right: 26px;
	}
	.text{
		justify-content: center;
		align-items: flex-start;
	}
	.name{
		padding-bottom: 16px;
	}
	.name text{
		font-size: 32px;
		font-family: "黑体";
		font-weight: bold;
	}
	.name view{
		font-size: 24px;
		padding: 6px 12px;
		background: linear-gradient(to bottom,#F88B88,#D94043);
		box-shadow: 0 0 20px rgba(0,0,0,0.2);
		border-radius: 12px;
		margin-left: 22px;
	}
	.name view.vipon{
		background:linear-gradient(to bottom,#FDE749,#E0B209);
		color: #5E46D7;
	}
	.menuCont{
		background: #fff;
		box-shadow: 0 0 30px rgba(0,0,0,0.2);
		width: 91%;
		margin: auto;
		border-radius: 20px;
		color: #666;
		justify-content: space-around;
		font-size: 28px;
		padding: 34px 0;
		margin-top: 40px;
	}
	
	.menuCont image{
		width: 44px;
		height: 44px;
		margin-bottom: 16px;
	}
	.menuCont text:first-of-type{
		margin-bottom: 6px;
	}
	.menuCont text:last-of-type{
		font-size: 26px;
	}
	.sign{
		font-size: 28px;
		width: 510px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		opacity: 0.8;
	}
	.navList{
		border-bottom: 1px solid #F5F5F5;
		font-size: 30px;
		justify-content: space-between;
		padding: 0 30px;
		height: 100px;
		color: #353535;
	}
	.navList:nth-of-type(2),.navList:nth-of-type(4),.navList:nth-of-type(7){
		border-bottom: 10px solid #F5F5F5;
	}
	.contact{
		border-bottom: 30px solid #F5F5F5;
		box-sizing: border-box;
		font-size: 30px;
		justify-content: space-between;
		padding: 0 30px;
		height: 130px;
		color: #353535;
		border-radius: 0;
		background: #fff;
		/* border: 1px solid red; */
	}
	.names image{
		width: 40px;
		height: 40px;
		margin-right: 30px;
	}
	.pot{
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: #FF3C30;
		margin-right: 14px;
	}
	.pot.potNum{
		min-width: 36px;
		height: 36px;
		line-height: 36px;
		color: #fff;
		text-align: center;
		font-size: 22px;
		justify-content: center;
	}
	.people{
		margin-right: 14px;
	}
	.people image{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-left: 20px;
	}
</style>
